<template>
  <div class="login-container">
    <div class="logo">
      <div class="login">
        <h1>登录</h1>
        <el-card shadow="never" class="login-card">
          <!-- 登录表单 -->
          <el-form ref="form" :rules="rules" :model="formData" class="form">
            <el-form-item prop="mobile">
              <el-input v-model="formData.mobile" placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="formData.password"
                placeholder="请输入密码"
                show-password
              />
            </el-form-item>
            <el-form-item prop="agree">
              <el-checkbox
                v-model="formData.agree"
                class="checkout"
              >用户平台使用协议</el-checkbox>
            </el-form-item>
            <el-form-item>
              <el-button class="loginBut" @click="onSubmit">登录</el-button>
            </el-form-item>
            <el-form-item>
              <p class="prompt-text">
                仅用于IT培训教学使用，为保障您的个人信息安全，请勿向平台录入任何个人敏感信息
                (如手机号、身份证号等)!
              </p>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
// 步骤
// 1. 实现点击校验
//    给button添加点击事件
//    通过ref获取表单对象
//    调用表单对象的validate方法
import { mapActions } from 'vuex'
export default {
  name: 'Login',
  data() {
    return {
      formData: {
        //  1 添加测试代码
        mobile: process.env.NODE_ENV ? '13800000002' : '',
        password: process.env.NODE_ENV ? 'hm#qd@23!' : '',
        agree: false
      },
      rules: {
        mobile: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '长度在为11个字符',
            trigger: ['blur', 'change']
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 4,
            max: 11,
            message: '长度在 4 到 11 个字符',
            trigger: ['blur', 'change']
          }
        ],
        agree: [
          {
            validator: (rule, value, callback) => {
              if (value) {
                callback()
              } else {
                callback(new Error('请勾选用户平台使用协议'))
              }
            },
            trigger: 'change'
          }
        ]
      }
    }
  },
  created() {
    alert(process.env.NODE_ENV)
    getToken() && this.$router.push('/')
  },
  methods: {
    ...mapActions('user', ['actionsLogin']),
    // 1.组件内获取 actions
    // 定义actions
    // 定义mutations
    // 使用mapActions获取actions
    onSubmit() {
      this.$refs.form
        .validate()
        .then(() => {
          this.actionsLogin(this.formData)
            .then(() => {
              this.$router.push('/')
            })
            .catch(() => {})
        })
        .catch((err) => {
          return err
        })
    }
  }
}
</script>

<style lang="scss">
.login-container {
  display: flex;
  align-items: stretch;
  height: 100vh;

  .logo {
    flex: 3;
    background: rgba(38, 72, 176) url(../../assets/common/login_back.png)
      no-repeat center / cover;
    border-top-right-radius: 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 0 100px;
    .icon {
      background: url(../../assets/common/logo.png) no-repeat 70px center /
        contain;
      width: 300px;
      height: 50px;
      margin-bottom: 50px;
    }
    .login {
      position: relative;
      border-radius: 10px;
      background-color: rgba(0, 0, 0, 0.4);
      width: 400px;

      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 10px;
        width: 400px;
        z-index: -1;
      }

      h1 {
        margin: 20px 0;
        padding-left: 20px;
        font-size: 25px;
        color: #fff;
      }
    }
  }

  .form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    height: 330px;
    .el-card {
      border: none;
      padding: 0;
    }
    .el-input {
      width: 350px;
      height: 44px;
      .el-input__inner {
        background: #f4f5fb;
      }
    }
    .el-checkbox {
      color: #fff;
      margin-left: -175px;
    }
    .loginBut {
      width: 350px;
      border-radius: 7px;
      font-size: 17px;
      height: 44px;
      background: #3a8ee6;
      color: #fff;
      font-weight: bold;
      border: none;
      box-sizing: border-box;

      &:hover {
        border: 1px solid #fff;
      }
    }
    .prompt-text {
      color: #606266;
      font-size: 14px;
      line-height: 24px;
      width: 350px;
      color: red;
    }
  }
  .login-card {
    box-shadow: none;
    border: none;
    border-radius: 0, 0, 10px, 10px;
    background-color: transparent;
  }
}
</style>
